<template>
	<view>
		<topicInfo :info="info"></topicInfo>
		<divider></divider>
		<!-- 精华帖子 -->
		<view v-for="(item,index) in hotList" >
			<view class="flex align-center border-bottom py-2 p-2" hover-class=" bg-light">
				<text class="iconfont icon-xihuan text-main mr-2"></text>
				<text class="font text-ellipsis">{{item.title}}</text>
			</view>
		</view>
		<divider></divider>
		<!-- 帖子列表 -->
		<view class="flex">
			<view v-for="(item,index) in tabbars" :key="index"
				class="flex-1 flex justify-center align-center py-2 font font-weight-bold"
				:class="index === tabIndex ? 'text-main font-md ': ''" @click="changeTab(index)">{{item.name}}</view>
		</view>
		<template v-if="listData.length > 0">
			<view v-for="(item2,index2) in listData" :key="">
				<commonList :item="item2" :index="index2"></commonList>
			</view>
		</template>
		<template v-else>
			<noThing></noThing>
		</template>
		<!-- 上拉加载 -->
		<loadMore v-if="listData.length > 0" :loadMore="loadText"></loadMore>
	</view>
</template>

<script>
	
	import topicInfo from '@/components/topic-detail/topic-info.vue'
	import commonList from '@/components/common/common-list.vue'
	import noThing from '@/components/common/nothing.vue'
	import loadMore from '@/components/common/loadmore.vue'

	export default {
		components: {
			topicInfo,
			commonList,
			noThing,
			loadMore
		},
		data() {
			return {
				info: {},
				hotList: [{
						title: "【新人必读】uniapp实战第二季商城类APP商城类APP"
					},
					{
						title: "【新人必读】uniapp实战第二季商城类APP商城类APP"
					}
				],
				tabIndex: 0,
				tabbars: [{
						name: "默认"
					},
					{
						name: "最新"
					}
				],
				//默认
				list1: [],
				page1:1,
				loadText1: "上拉加载更多",
				firstLoad1:false,
				//最新
				list2: [],
				page2:1,
				loadText2:'上拉加载更多',
				firstLoad2:false
			}
		},
		onLoad(e) {
			this.info = JSON.parse(e.detail)
			uni.setNavigationBarTitle({
				title:this.info.title
			})
			this.getData()
			uni.$on('updateFolloworSurpport',(e) => {
				switch (e.type){
					case 'follow':
					this.follow(e.user_id)
						break;
					case 'support':
						this.dosupport(e.data)
						break;
					default:
						break;
				}
			})
		},
		onUnload() {
			uni.$off('updateFolloworSurpport',(e) => {})
		},
		onReachBottom() {
			this.loadMoreEvent()
		},
		computed: {
			//根据索引显示列表
			listData() {
				if (this.tabIndex === 0) {
					return this.list1
				}
				return this.list2
			},
			//计算页面触底
			loadText(){
				return this['loadText' + (this.tabIndex + 1)]
			}
		},
		methods: {
			//获取数据
			getData(){
				let no = this.tabIndex + 1
				let isrefensh = this['page' + no] ===1
				this.$H.get('/topic/'+this.info.id+'/post/'+this['page' + no]).then(res => {
					let list = res.list.map( v => {
						return this.$U.formatCommonList(v)
					})
					if(isrefensh){
						this['firstLoad' + no] = true
					}
					this['loadText' + no] = list.length < 10 ? '没有更多了':'上拉加载更多'
					this['list' + no] = isrefensh ? [...list]:[...this['list' + no],...list]
				}).catch(err => {
					if(!isrefensh){
						this['page' + no] --
					}
				})
			},
			changeTab(index) {
				this.tabIndex = index
				if(!this['firstLoad' + (index+1)]){
					this.getData()
				}
			},
			//上拉加载更多
			loadMoreEvent(){
				let index = this.tabIndex
				let no = index + 1
				if(this['loadText' +  no] !== '上拉加载更多'){
					return
				}
				this['loadText' +  no] = "加载中..."
				this['page' + no] ++
				this.getData()
			},
			//关注
			follow(e){
				this.list1.forEach(v => {
					if(v.user_id === e){
						v.isFollow = true
					}
				})
				this.list2.forEach(v => {
					if(v.user_id === e){
						v.isFollow = true
					}
				})
				uni.showToast({
					title: '关注成功',
					icon:'none'
				});
			},
			//顶踩操作
			dosupport(e) {
				console.log(e)
				let no = this.tabIndex +1
				this['list'+ no].forEach(item => {
					if (item.id === e.id) {
						if (item.support.type === '') {
							item.support.type = e.type
							item.support[e.type + '_count']++
						} else if (item.support.type === 'support' && e.type === 'unsupport') {
							item.support.support_count--
							item.support.unsupport_count++
						} else if (item.support.type === 'unsupport' && e.type === 'support') {
							item.support.support_count++
							item.support.unsupport_count--
						}
						item.support.type = e.type
					}
				})
				uni.showToast({
					title: e.type === 'support' ? '喜欢' : "不喜欢"
				});
			},
		}
	}
</script>

<style>
	.filter {
		filter: blur(10rpx);
	}
</style>
